<template>
  <div>
    <el-row>
      <Nav></Nav>
    </el-row>
    <el-container class="menuContent">
      <el-header class="header">
        <ul>
          <span v-if="this.Grade == '高级管理员' || this.Grade == '普通管理员' || this.Grade == '普通用户' || this.Grade == '第三方用户'">
            <li @click="toRouter('message')"  :class="this.active == 'message' ?  'active' : ''">
              <b></b>
              <b></b>
              <b></b>
              <b></b>
              系统信息
            </li>
          </span>
          <span  v-if="this.Grade == '普通管理员' || this.Grade == '高级管理员'">
            <li @click="toRouter('set')" :class="this.active == 'set' ?  'active' : ''" >
              <b></b>
              <b></b>
              <b></b>
              <b></b>
              系统设置
            </li>
          </span>
          <span v-if="this.Grade == '首次进入' || this.Grade == '高级管理员' || this.Grade == '普通管理员'">
            <li @click="toRouter('user')"  :class="this.active == 'user' ?  'active' : ''">
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                用户管理
            </li>
          </span>
         <span v-if="this.Grade == '普通用户' || this.Grade == '普通管理员' || this.Grade == '高级管理员'">
            <li @click="toRouter('hisdata')"  :class="this.active == 'hisdata' ?  'active' : ''">
              <b></b>
              <b></b>
              <b></b>
              <b></b>
              历史数据
            </li>
          </span>
          <span v-if="this.Grade == '高级管理员'">
            <li @click="toRouter('IndexEdit')"  :class="this.active == 'IndexEdit' ?  'active' : ''" v-if="this.isMobile !== 'mobile'">
              <b></b>
              <b></b>
              <b></b>
              <b></b>
              主页配置
            </li>
          </span>
          <span v-if="this.Grade == '高级管理员'">
            <li @click="toRouter('config')"  :class="this.active == 'config' ?  'active' : ''" v-if="this.isMobile !== 'mobile'">
              <b></b>
              <b></b>
              <b></b>
              <b></b>
              设备列表
            </li>
            <li @click="toRouter('upexcel')"  :class="this.active == 'upexcel' ?  'active' : ''" v-if="this.isMobile !== 'mobile'">
              <b></b>
              <b></b>
              <b></b>
              <b></b>
              系统备份
            </li>
            <!-- <li @click="toRouter('forward')"  :class="this.active == 'forward' ?  'active' : ''" v-if="this.isMobile !== 'mobile'">
              <b></b>
              <b></b>
              <b></b>
              <b></b>
              数据转发
            </li> -->
            <li @click="liandong()"  :class="this.active == 'linkage' ?  'active' : ''">
              <b></b>
              <b></b>
              <b></b>
              <b></b>
              高级设置
            </li>
           </span>
        </ul>
      </el-header>
      <el-main class="mainSection">
        <component :is="this.Grade == '首次进入' ? 'user' : overList"/>
      </el-main>
    </el-container>
    <el-dialog
        title="密码输入"
        :visible.sync="password"
        width="30%"
        class="dialog_link"
        :append-to-body="true">
        <div class="meanBoxpass">
          <el-form>
            <el-form-item label="密码:" label-width="60px" class="meanBox_input">
              <el-input v-model="passwordValue" type="password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="getpass(0)">取 消</el-button>
            <el-button type="primary" @click="getpass(1)">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import message from "../components/set/Message";
import set from "../components/set/Set";
import Nav from "../components/index/navbar";
import user from "../components/set/User";
import hisdata from "../components/set/Hisdata";
import config from "../components/set/Config";
import IndexEdit from "../components/set/IndexEdit";
import upexcel from "../components/set/Upexcel";
import linkage from "../components/set/linkage";
import forward from "../components/set/Forward";

export default {
  components: { Nav, message, set, user, hisdata, config, IndexEdit, upexcel, linkage, forward },
  data() {
    return {
      overList: "message",
      active: 'message',
      password:false,
      passwordValue:'',
      isMobile: '',
      Grade:localStorage.getItem("当前用户权限"),
    };
  },
  created() {
    this.isMobile = localStorage.getItem("当前终端")
    this.Grade = localStorage.getItem("当前用户权限")

  },
  methods: {
    //路由跳转
    toRouter(val) {
      // this.$router.push({ path:val})
      this.overList = val;
      this.active = val
    },
    getpass(data){
      if(data == 1){
        if(this.passwordValue == '88567889'){
          this.toRouter('linkage')
          this.password = false
        }else{
          this.$notify({
              title: '密码错误',
              type: 'warning',
              duration: 1500
          });
        }
      }else if(data == 0){
        this.password = false
      }
    },
    liandong(){
      this.passwordValue = ''
      this.password = true
    }
  },
};
</script>

<style scoped>
/deep/ .el-dialog__header {
    background: rgba(0, 0, 0, 0.2);
    color: #fff !important;
}
/deep/ .el-form-item__label{
    color: #fff !important;
}
/deep/ .el-dialog__header .el-dialog__title {
    color: #fff !important;
}
/deep/ .el-dialog__body{
  padding-bottom: 0px;
}
.meanBoxpass{
  width: 90%;

}
.menuContent {
  color: #fff;
}
.header{
    box-sizing: border-box;
    border: 1px solid rgba(89, 129, 165, 0.6);
    background: rgba(89, 129, 165, 0.2);
    padding-left: 0px;
}
.menuContent ul li {
    float: left;
    height: 60px;
    line-height: 60px;
    list-style: none;
    padding: 0 15px;
    position: relative;
    cursor: pointer;
    margin-right: 20px;
    transition: all .4s;
}
.menuContent ul li:hover{
 background: rgba(89, 129, 165, 0.6);

}
.menuContent ul li.active{
 background: rgba(89, 129, 165, 0.6);

}
.menuContent ul li b{
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    width: 9px;
    height: 9px;
}
.menuContent ul li b:nth-child(1){
    border-right: none;
    border-bottom: none;
    top: 0;  
    left: 0;

}
.menuContent ul li b:nth-child(2){
    border-left: none;
    border-bottom: none;
    top: 0;
    right: 0;
}
.menuContent ul li b:nth-child(3){
    border-left: none;
    border-top: none;
    bottom: 0;
    right: 0;
}
.menuContent ul li b:nth-child(4){
    border-right: none;
    border-top: none;
    bottom: 0;
    left: 0;
}
.mainSection{
    box-sizing: border-box;
    border: 1px solid rgba(89, 129, 165, 0.6);
    min-height: 900px;
}
</style>